<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>msgIndex</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../commons/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 加载bootstrap-select -->
    <link href="../commons/bootstrap-select-1.13.9-dist/css/bootstrap-select.min.css" rel="stylesheet">
    <!-- 加载bootstrap-treeview -->
    <link href="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../commons/css/currency.css">



    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">CIMS-校园即时通讯系统</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="msgIndex">首页</a></li>
                <li class=""><a href="msgSend">发消息</a></li>
                <li><a href="msgReceive"><span id="noAnserCount" class="badge pull-right" style="background-color:red"></span> 收消息 </a></li>
            </ul>
            <ul class="nav navbar-nav" style="float: right">
                <li class=""><a id="loginUser_nav"></a></li>
                <li class=""><a id="logout_nav">注销</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="page-header">
        <h3>个人消息</h3>
    </div>
    <div class="jumbotron" style="height: 520px;">

            <div class="chart-container col-xs-5 col-md-5"
                 style="position: relative; height:250px; width:500px; float:left; margin-top: -0px;">
                <div class="panel-body" id="receiveMsg_panel">
<%--                    <canvas id="chart"></canvas>--%>
<%--                    <canvas id="myChart1"></canvas>--%>
                </div>
            </div>
            <div class="chart-container col-xs-5 col-md-6"
                 style="position: relative; height:250px; width:500px; float:right; margin-top: -0px;">
                <div class="panel-body" id="sendMsg_panel">
<%--                    <canvas id="Piechart"></canvas>--%>
<%--                    <canvas id="myChart2"></canvas>--%>
                </div>
            </div>

    </div>
</div>

<div class="footer ">
    <div class="container">
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li> Campus Instant Messaging System @2020 杭州职业技术学院 软件技术专业</li>
            </ul>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../commons/js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../commons/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.js"></script>
<script src="../commons/bootstrap-select-1.13.9-dist/js/bootstrap-select.min.js"></script>
<!--加载chart.js -->
<script src="../commons/Chart.js-2.9.3/dist/Chart.min.js"></script>
<script src="../commons/Chart.js-2.9.3/samples/utils.js"></script>
<script src="../commons/js/login.js"></script>
<script>
    var ctx = document.getElementById("chart");
    var ctx1 = document.getElementById("Piechart");
    var myChart = new Chart(ctx, {
        type: "pie",
        data: {
            labels: ["已读", "未读", "已回复"],
            datasets: [
                {
                    data: [10, 20, 30],
                    backgroundColor: ["red", "Yellow", "blue"],
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: "接收消息"
            },
            legend: {
                position: "right"
            },
        }

    });

    var myChart1 = new Chart(ctx1, {
        type: "line",

        data: {
            labels: ["已读", "未读", "已回复"],
            datasets: [
                {
                    label: "Dataset1",
                    data: [10, 30, 20],
                    backgroundColor: ["red"]

                },
                {
                    label: "Dataset2",
                    data: [50, 20, 40],
                    backgroundColor: ["blue"]

                }
            ]
        },
        options: {
            title: {
                display: true,
                text: "发送消息"
            },
            legend: {
                position: "right"
            },
        }

    });
</script>
<script type="text/javascript">
    $(function () {

        load_noAnswer_Count();

        loadMyChart();
    });

    function load_noAnswer_Count() {
        $.ajax({
            url: "noAnswerCount",
            type: "GET",
            dataType: "json",

            success: function (result) {
                if (result.code == 100) {
                    //查询成功，解析并显示数据
                    $("#noAnserCount").empty().append(result.extend.noAnswerCount);
                } else {

                }
            }
        });
    }

    function loadMyChart() {
        $.ajax({
            url: "msgCount",
            type: "GET",
            dataType: "json",

            success: function (result) {
                if (result.code == 100) {

                    //消息统计图表
                    initMyChart(result);
                }
            }
        });
    }

    function initMyChart(result) {
        $("#myChart1").remove();
        $("#receiveMsg_panel").append("<canvas id='myChart1'></canvas>");
        var ctx1 = document.getElementById('myChart1').getContext('2d');
        var chart1 = new Chart(ctx1, {
            type: 'pie',
            data: {
                datasets: [{
                    data: [
                        result.extend.noAnswerCount,result.extend.doneAnswerCount
                    ],
                    backgroundColor: [
                        window.chartColors.red,
                        window.chartColors.blue
                    ],
                    label: '接收消息'
                }],
                labels: [
                    '未处理',
                    '已处理'
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: '接收消息'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        });

        $("#sendMsg_panel").append("<canvas id='myChart2'></canvas>");
        var ctx2 = document.getElementById('myChart2').getContext('2d');
        var chart2 = new Chart(ctx2, {
            type: 'line',
            data: {
                datasets: [{
                    data: result.extend.doneCounts,
                    backgroundColor: [
                        window.chartColors.blue
                    ],
                    label: '已读'
                },{
                    data: result.extend.allCounts,
                    backgroundColor: [
                        window.chartColors.red
                    ],
                    label: '未读'
                }],

                labels: result.extend.labels,
            },
            options: {
                title: {
                    display: true,
                    text: "发送消息"
                },
                legend: {
                    position: "right"
                },
            }
        });
    }
</script>
</body>
</html>
